<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElCard, ElButton, ElTag } from 'element-plus'
import CommonHeader from '@/components/CommonHeader.vue'
import FloatingSidebar from '@/components/FloatingSidebar.vue'
import CommonFooter from '@/components/CommonFooter.vue'
import { orderListByTypeService } from '@/api/order.js'

const route = useRoute()
const router = useRouter()
const type = computed(() => route.query.type || '0')

const typeMap = {
    '1': '待付款',
    '3': '待收货',
    '6': '待评价',
    '4': '退换/售后',
    '0': '全部订单'
}

const orders = ref({})

const fetchOrders = async () => {
    const res = await orderListByTypeService(type.value)
    orders.value = res.data || {}
}

onMounted(fetchOrders)
watch(type, fetchOrders)

const goBack = () => {
    router.back()
}

// 获取订单状态标签类型
const getStatusTagType = (status) => {
    const tagTypes = {
        '1': 'info',      // 未支付
        '2': 'primary',   // 已付款,未发货
        '3': 'warning',   // 已发货,未确认
        '4': 'success',   // 确认收货，交易成功
        '5': 'danger',    // 交易取消，订单关闭
        '6': ''           // 交易结束，已评价
    }
    return tagTypes[status] || ''
}

// 获取订单状态文本
const getStatusText = (status) => {
    const statusTexts = {
        '1': '未支付',
        '2': '已付款,未发货',
        '3': '已发货,未确认',
        '4': '确认收货，交易成功',
        '5': '交易取消，订单关闭',
        '6': '交易结束，已评价'
    }
    return statusTexts[status] || '未知状态'
}
</script>

<template>
    <CommonHeader />
    <FloatingSidebar />
    <div style="max-width: 800px; margin: 30px auto; min-height: 60vh;">
        <el-button type="default" @click="goBack" style="margin-bottom: 18px;">返回</el-button>
        <h2 style="margin-bottom: 18px;">{{ typeMap[type] || '订单列表' }}</h2>
        
        <!-- 订单列表 -->
        <div v-for="(products, orderNumber) in orders" :key="orderNumber" style="margin-bottom: 24px;">
            <el-card>
                <!-- 订单头部信息 -->
                <div style="border-bottom: 1px solid #ebeef5; padding-bottom: 12px; margin-bottom: 16px;">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <div>
                            <span style="font-weight: bold; color: #303133;">订单号: {{ orderNumber }}</span>
                        </div>
                        <div>
                            <el-tag :type="getStatusTagType(type)" effect="light">
                                {{ getStatusText(type) }}
                            </el-tag>
                        </div>
                    </div>
                </div>
                
                <!-- 商品列表 -->
                <div v-for="product in products" :key="product.id" style="margin-bottom: 16px;">
                    <div style="display: flex; align-items: center; gap: 16px;">
                        <img :src="product.image || '/src/assets/demo.png'" :alt="product.name"
                            style="width: 80px; height: 80px; border-radius: 8px; object-fit: cover; background: #fafbfc;" />
                        <div style="flex: 1;">
                            <div style="font-weight: bold; font-size: 16px; color: #303133; margin-bottom: 8px;">
                                {{ product.name }}
                            </div>
                            <div style="font-size: 13px; color: #606266; line-height: 1.5;">
                                {{ product.description }}
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 订单操作按钮 -->
                <div style="border-top: 1px solid #ebeef5; padding-top: 16px; text-align: right;">
                    <el-button type="primary" size="small" style="margin-right: 8px;">查看详情</el-button>
                    <el-button type="default" size="small">联系客服</el-button>
                </div>
            </el-card>
        </div>
        
        <!-- 空状态 -->
        <div v-if="Object.keys(orders).length === 0" style="text-align: center; color: #bbb; padding: 60px 0;">
            <div style="font-size: 16px; margin-bottom: 8px;">暂无相关订单</div>
            <div style="font-size: 14px;">您还没有{{ typeMap[type] || '相关' }}的订单</div>
        </div>
    </div>
    <CommonFooter />
</template>